<script setup lang="ts">
import { reactive, defineProps, ref } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { useUserStore } from "@/store/userStore";
import router from "@/router";

// 定义 props 类型
interface Props {
  isLogin: boolean;
}

const props = defineProps<Props>();

// 定义表单数据的类型
interface FormData {
  userName: string;
  passWord: string;
  confirmPassword?: string; // confirmPassword 在登录时可以是 undefined
}

const form = reactive<FormData>({
  userName: "",
  passWord: "",
  confirmPassword: "",
});
// 定义表单验证规则
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  passWord: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
  confirmPassword: [
    {
      required: true,
      message: "请确认密码",
      trigger: "blur",
    },
    {
      validator: (rule, value, callback) => {
        if (value !== form.passWord) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

const formRef = ref<FormInstance | null>(null);

const submitForm = async (): Promise<void> => {
  if (props.isLogin) {
    const userStore = useUserStore();
    // 登录
    if (!formRef.value) return;
    await formRef.value.validate();
    await userStore.login({
      username: form.userName,
      password: form.passWord,
    });
    await userStore.getUserInfo();
    // 确保在登录成功后跳转到首页
    router.push("/home");
  } else {
    console.log("注册成功", form);
  }
};
</script>

<template>
  <div class="form-content">
    <el-form
      :model="form"
      label-width="auto"
      ref="formRef"
      :rules="rules"
      style="max-width: 600px"
      class="custom-form"
    >
      <h2 class="form-title">{{ props.isLogin ? "登录" : "注册" }}</h2>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="form.userName" type="text" />
      </el-form-item>
      <el-form-item label="密码" prop="passWord" type="password">
        <el-input v-model="form.passWord" type="password" />
      </el-form-item>
      <el-form-item
        v-if="!props.isLogin"
        label="确认密码"
        prop="confirmPassword"
        type="password"
      >
        <el-input v-model="form.confirmPassword" type="password" />
      </el-form-item>
      <el-button type="primary" @click="submitForm" class="submit-button">
        {{ props.isLogin ? "登录" : "注册" }}
      </el-button>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.form-content {
  display: flex; /* 使用 flexbox 来居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让容器的高度为视口高度 */
  background-image: url("@/assets/images/login-bg.png");
  background-size: cover;
  background-position: center;
  .custom-form {
    border: 1px solid #ccc; /* 添加边框 */
    border-radius: 10px; /* 添加弧形边框 */
    padding: 20px; /* 添加内边距 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    background-color: rgba(255, 255, 255, 0.8); /* 设置背景色 */

    .submit-button {
      width: 100%; /* 提交按钮宽度为100% */
      margin-top: 20px; /* 提交按钮与输入框之间的间距 */
    }
    .form-title {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
}
</style>
